<script setup lang="ts">
import { watch, onMounted } from 'vue'
import * as echarts from 'echarts/core'
import { useEcharts } from './echarts.ts'
import { api_getHomeBaseInfo, api_getWeatherChartData } from '~@/api/common/home.module'

// defineOptions({
//   name: 'LineChart',
// })

const opts ={
  series: [
    {
      type: 'gauge',
      axisLine: {
        lineStyle: {
          width: 10,
          color: [
            [0.3, '#67e0e3'],
            [0.7, '#37a2da'],
            [1, '#fd666d']
          ]
        }
      },
      pointer: {
        itemStyle: {
          color: 'auto'
        }
      },
      axisTick: {
        distance: -30,
        length: 8,
        lineStyle: {
          color: '#000',
          width: 2
        }
      },
      splitLine: {
        distance: -30,
        length: 10,
        lineStyle: {
          color: '#000',
          width: 4
        }
      },
      axisLabel: {
        color: 'inherit',
        distance: 20,
        fontSize: 20
      },
      detail: {
        valueAnimation: true,
        formatter: '{value} km/h',
        color: 'inherit'
      },
      data: [
        {
          value: 70
        }
      ]
    }
  ]
};

const { domRef, updateOptions } = useEcharts(() => {
  return {
    title: {
      text: '当前累计用能比 %',
      left: 'center',
    },
    legend: {
      data: ['2015', '2016'],
    },
    tooltip: {
      formatter: '{a} <br/>{b} : {c}%',
    },
    series: [
      {
        name: 'Pressure',
        type: 'gauge',
        progress: {
          show: true,
        },
        detail: {
          valueAnimation: true,
          formatter: '{value}',
          fontSize: 25,
        },
        data: [
          {
            value: 50,
            name: '',
          },
        ],
      },
    ],
    // ...opts
  }
})

async function mockData() {
  await new Promise((resolve) => {
    setTimeout(resolve, 1000)
  })

  updateOptions((opts) => {
    opts.xAxis.data = ['06:00', '08:00', '10:00', '12:00', '14:00', '16:00', '18:00', '20:00', '22:00', '24:00']
    opts.series[0].data = [4623, 6145, 6268, 6411, 1890, 4251, 2978, 3880, 3606, 4311]
    opts.series[1].data = [2208, 2016, 2916, 4512, 8281, 2008, 1963, 2367, 2956, 678]

    return opts
  })
}

function updateLocale() {
  updateOptions((opts, factory) => {
    const originOpts = factory()
    opts.legend.data = originOpts.legend.data
    opts.series[0].name = originOpts.series[0].name
    opts.series[1].name = originOpts.series[1].name

    return opts
  })
}

async function init() {
  mockData()
}

init()

onMounted(() => {
  window.addEventListener('resize', function() {
    // 重新定义图表尺寸
    myChart.resize();
});
})
</script>

<template>
  <div ref="domRef" class="h-240px w-260px overflow-hidden" />
</template>

<style scoped>
div {
  /* border: 1px solid red; */
  position: relative;
  top: -0px;
  width: 110%;
  height: 110%;
}
</style>
